<template>
  <XenPageLayout title="活动中心" title-align="left">
    <view class="container">
      <!-- 顶部欢迎语 -->
      <view class="header">
        <text class="welcome-title">您好</text>
        <text class="welcome-subtitle">欢迎来到活动中心！</text>
      </view>

      <!-- 活动列表 -->
      <view class="activity-list">
        <view
          class="activity-card"
          v-for="(item, index) in activityList"
          :key="index"
          @click="handleViewDetail(item)"
        >
          <view class="activity-card-header">
            <text class="activity-title">{{ item.ActivityName }}</text>
            <text
              class="activity-status"
              :class="{
                'status-ongoing': item.ActivityStatus === '进行中',
                'status-not-started': item.ActivityStatus === '未开始',
                'status-ended': item.ActivityStatus === '已结束',
              }"
            >
              {{ item.ActivityStatus }}
            </text>
          </view>
          <view class="activity-card-body">
            <view class="activity-time">
              <text class="label">开始时间：</text>
              <text class="value">{{ formatDateTime(item.StartTime) }}</text>
            </view>
            <view class="activity-time">
              <text class="label">结束时间：</text>
              <text class="value">{{ formatDateTime(item.EndTime) }}</text>
            </view>
          </view>
          <view class="activity-card-footer">
            <view
              class="action-btn join-btn"
              @click="handleViewDetail(item)"
              v-if="item.ParticipationCount && item.ParticipationCount > 0"
            >
              <text class="btn-text">查看参与详情</text>
            </view>
            <view
              class="action-btn join-btn"
              @click.stop="handleJoin(item)"
              v-if="item.ParticipationCount === 0"
            >
              <text class="btn-text">立即参与</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 无数据提示 -->
      <view class="empty-tip" v-if="activityList.length === 0">
        <text>暂无活动</text>
      </view>
    </view>
  </XenPageLayout>
</template>

<script setup lang="ts">
import XenPageLayout from "@/layouts/XenPageLayout.vue";
import { SysActivityListApi } from "./api";
import { ref } from "vue";
import type { ISearchResult } from "./api/interface";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import { formatDateTime } from "../../../utils/xenUtils";
// 添加事件总线导入
import { ActivityEvents } from "../../../utils/eventBus";

const activityList = ref<ISearchResult[]>([]);

const handleViewDetail = (item: ISearchResult) => {
  uni.navigateTo({
    url: `/subpkg-activity/activity/sysactivityparticipation/index?activityId=${item.ID}`,
  });
};

const getActivityList = async () => {
  const data = await SysActivityListApi().search({ Page: 1, Limit: 10 });
  activityList.value = (data.Data as ISearchResult[]) || [];
};

const handleJoin = (activity: ISearchResult) => {
  uni.navigateTo({
    url: `/subpkg-activity/activity/sysactivityparticipation/create?activityId=${activity.ID}`,
  });
};

// 活动事件监听器取消函数
let unsubscribeActivityEvents: (() => void) | null = null;

onLoad(() => {
  getActivityList();

  // 监听活动更新事件
  unsubscribeActivityEvents = ActivityEvents.on((eventData) => {
    // 如果是参与事件，刷新活动列表以更新参与状态
    if (eventData.action === "custom" && eventData.customAction === "join") {
      getActivityList();
    }
  });
});

// 页面显示时刷新数据
onShow(() => {
  getActivityList();
});

// 页面卸载时移除事件监听
onUnload(() => {
  if (unsubscribeActivityEvents) {
    unsubscribeActivityEvents();
    unsubscribeActivityEvents = null;
  }
});
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  background: #f5f7fa;
  padding: 20rpx;
  height: 100vh;
}

.header {
  margin: 40rpx 10rpx 60rpx;
}

.welcome-title {
  font-size: 48rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
  letter-spacing: 1rpx;
}

.welcome-subtitle {
  font-size: 32rpx;
  color: #666;
  letter-spacing: 1rpx;
}

.activity-list {
  padding: 0 10rpx;
}

.activity-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6rpx;
    height: 100%;
    background: #b88e67;
  }
}

.activity-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding-left: 10rpx;

  .activity-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    flex: 1;
  }

  .activity-status {
    font-size: 22rpx;
    color: #999;
    padding: 4rpx 12rpx;
    border-radius: 30rpx;
    background-color: rgba(0, 0, 0, 0.05);

    &.status-ongoing {
      color: #52c41a;
      background-color: rgba(82, 196, 26, 0.1);
    }

    &.status-not-started {
      color: #1890ff;
      background-color: rgba(24, 144, 255, 0.1);
    }

    &.status-ended {
      color: #999;
      background-color: rgba(0, 0, 0, 0.05);
    }
  }
}

.activity-card-body {
  margin-bottom: 24rpx;
  padding-left: 10rpx;

  .activity-time {
    display: flex;
    margin-bottom: 8rpx;

    .label {
      font-size: 26rpx;
      color: #666;
      width: 150rpx;
    }

    .value {
      font-size: 26rpx;
      color: #333;
      flex: 1;
    }
  }
}

.activity-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16rpx;
  padding-left: 10rpx;

  .action-btn {
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30rpx;
    padding: 0 24rpx;
    transition: all 0.2s;

    &:active {
      transform: scale(0.97);
    }

    .btn-text {
      font-size: 24rpx;
      font-weight: 500;
    }
  }

  .join-btn {
    background: #b88e67;
    box-shadow: 0 4rpx 8rpx rgba(184, 142, 103, 0.2);

    .btn-text {
      color: #fff;
    }

    &.disabled {
      background: #cccccc;
      box-shadow: none;
    }
  }
}

.empty-tip {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>
